<!--
 * @Description: 商品详情页面组件
 -->
<template>
  <div id="details">

    <!-- 主要内容 -->
    <div class="main">
      <!-- 左侧商品图片集合 -->
      <div class="block">
        <div class="div-img-intro">
          <el-row>
            <el-col :span="18">
              <div class="div-content">
                <el-image class="img-def" :src="defImg"/>
              </div>
            </el-col>
            <!-- 左侧游戏图片列表 -->
            <el-col :span="6">
              <div class="div-img-list">
                <div class="div-img-item" v-for="item in imgList" :key="item.id">
                  <button @click="changeImg(item.imgUrl)">
                    <el-image :src="item.imgUrl"></el-image>
                  </button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 游戏介绍 start -->
        <div class="div-game-intro">
          <h3>游戏介绍</h3>
          <el-card style="border-radius: 10px">
            <p v-html="goodsInfo.gameIntro"></p>
          </el-card>

        </div>
        <!-- 游戏介绍 end -->

        <!-- 更新与活动 start -->
        <div class="div-game-update">
          <div>
            <h3 style="float: left">更新通告</h3>
            <div style="text-align: right">
              <el-button class="btn-update-all" round type="info" size="mini">查看全部</el-button>
            </div>
          </div>
          <div class="div-game-update-list" v-for="item in gameUpdateList.slice(0, 4)" :key="item.id">
            <el-card style="border-radius: 10px" shadow="hover">
              <el-row>
                <el-col :span="9">
                  <el-image :src="item.defImg" class="img-game-update"></el-image>
                </el-col>
                <el-col :span="15">
                  <h4>{{ item.title }}</h4>
                  <p style="margin-top: 5px">
                    {{ item.content }}
                  </p>
                  <div style="margin-top: 50px">
                    <span>浏览: {{ item.viewCount }}</span>
                    <span style="margin-left: 10px">评论: {{ item.commentCount }}</span>
                    <span style="margin-left: 10px">发布: {{ item.createTime }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
        <!-- 更新与活动 end -->

        <!-- 玩家评价 start -->
        <div class="div-game-comment">
          <h3>玩家评价</h3>
          <div class="div-game-comment-item" v-for="item in gameCommentList">
            <el-card style="border-radius: 10px" shadow="hover">
              <el-row>
                <el-col :span="6">
                  <div class="div-comment-left">
                    <el-avatar
                        :src="item.header == null ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' : item.header">
                    </el-avatar>
                    <el-link :underline="false" class="span-nickname">
                      {{ item.nickname }}
                    </el-link>
                  </div>
                </el-col>

                <el-col :span="18">
                  <div class="div-comment-right">
                    <div>
                      <!-- 发布时间 -->
                      <span class="span-create-time">发布于 {{ item.createTime }}</span>
                      <el-rate v-model="item.scope" disabled text-color="#ff9900">
                      </el-rate>
                    </div>
                    <p v-html="item.content"></p>
                    <!-- 回复 -->
                    <div style="text-align: right; margin-top: 10px">
                      <span style="margin-left: 5px; cursor: pointer">
                        <i class="iconfont">&#xe607;</i> {{ item.replyCount }}
                    </span>
                      <!-- 点赞 -->
                      <span style="margin-left: 5px; cursor: pointer" @click="thumbsUpComment(item.id)">
                        <i class="iconfont" v-if="thumbsCommentIdList.indexOf(item.id) == -1">&#xe8c3;</i>
                        <i class="iconfont i-comment-thumbs-after" v-else>&#xe8c3;</i>
                        <span :id="item.id"> {{ item.usefulCount }}</span>
                      </span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
        <!-- 玩家评价 end -->

      </div>
      <!-- 左侧商品轮播图END -->

      <!-- 右侧内容区 -->
      <div class="content">
        <div class="div-game-sale">
          <el-card style="border-radius: 10px;">
            <h1 class="name">{{ goodsInfo.gameName }}</h1>
            <p class="intro">{{ goodsInfo.gameBriefIntro }}</p>
            <div class="price">
              <span v-show="goodsInfo.seckillPrice != null">￥ {{ Number(goodsInfo.seckillPrice).toFixed(2) }}元</span>
              <!-- 原价 -->
              <span v-show="goodsInfo.seckillPrice != null" class="del">￥ {{
                  Number(goodsInfo.price).toFixed(2)
                }}元</span>
              <!-- 如果打折 -->
              <span v-show="goodsInfo.seckillPrice == null"
                    style="color: #b0b0b0">￥ {{ Number(goodsInfo.price).toFixed(2) }}元</span>
              <!-- 添加到心愿菜单 -->
              <div class="div-wish">
                <el-button size="mini" round @click="addWish" v-bind:class="changeWishBtnColor">
                  <i class="iconfont">&#xe64c;</i> {{ this.changeWishBtnValue }}
                </el-button>
              </div>
            </div>

            <!-- 内容区底部按钮 -->
            <div class="button">
              <el-button class="shop-cart" :disabled="dis" @click="addShoppingCart(goodsInfo.price, goodsInfo.seckillPrice)">加入购物车</el-button>
              <el-button class="like" @click="addCollect">买它</el-button>
            </div>
            <!-- 内容区底部按钮END -->
          </el-card>
        </div>

        <!-- 游戏配置介绍 -->
        <div class="div-game-attr">
          <el-card style="border-radius: 10px">
            <div class="div-game-attr-list" v-for="item in gameAttrList" :key="item.id">
              <h3>{{ item.attrGroupName }}</h3>
              <div>
                <div v-for="attr in item.attrList">
                  <p>
                    <span style="color: #a19c99">{{ attr.attrName }}</span> :
                    <span>{{ attr.value }}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <!-- 右侧内容区END -->
    </div>
    <!-- 主要内容END -->
  </div>
</template>
<script>
import {mapActions, mapGetters} from "vuex";
import gameCart from "@/api/cart/gameCart";
import memberWish from "@/api/member/memberWish";
import gameComment from "@/api/club/gameComment";
import memberThumbsGameComment from "@/api/member/memberThumbsGameComment";
import gamesGoods from "@/api/game/gamesGoods";
import gameAttr from "@/api/game/gameAttr";
import gameUpdate from "@/api/game/gameUpdate";

export default {
  data() {
    return {
      dis: false, // 控制“加入购物车按钮是否可用”
      gameId: "", // 商品id
      goodsInfo: "", // 商品详细信息
      defImg: '',
      imgList: '',  //商品图片信息
      imgUrlList: [], //商品图片预览信息
      productPicture: "", // 商品图片
      gameAttrList: '',  //游戏配置信息列表
      gameUpdateList: '',  //游戏更新列表
      gameCart: {}, //商品购物车信息
      changeWishBtnColor: '',  //心愿单 颜色
      changeWishBtnValue: '加入心愿单',  //心愿单 按钮value
      memberWish: {}, //心愿单信息
      memberWishId: '', //心愿单信息id
      page: 1,  //游戏评论分页查询
      gameCommentList: {},  //游戏评论信息
      thumbsCommentIdList: [], //用户点赞的id列表
    };
  },
  computed: {
    ...mapGetters(['getNum'])
  },
  // 通过路由获取商品id
  activated() {
    if (this.$route.query.id != undefined) {
      this.gameId = this.$route.query.id
      //获取游戏详情信息
      this.getDetails(this.gameId)
      //获取游戏的属性配置信息
      this.getGameAttr(this.gameId)
      //获取游戏更新内容
      this.getGameUpdate(this.gameId)
      //获取游戏的评论信息
      this.getGameComment(this.gameId)
      //判断是否有用户登录
      if (this.$store.getters.getUser) {
        //获取用户的心愿单
        this.getWishGameIdsById(this.gameId)
        //获取用户点赞的评论
        this.getCommentThumbs(this.$store.getters.getUser.id, this.gameId)
      }
    }
  },
  watch: {
    // 监听商品id的变化，请求后端获取商品数据
    productID: function (val) {
      this.getDetails(val);
    }
  },
  methods: {
    ...mapActions(["setShoppingCartNum", "addWishGameIds", 'removeWishGameId']),
    // 获取商品详细信息
    getDetails(id) {
      gamesGoods.getGameInfo(id)
          .then(result => {
            this.goodsInfo = result.data
            this.defImg = this.goodsInfo.defaultImg
            this.imgList = this.goodsInfo.imgList
            //预览图片填充
            for (let i = 0; i < this.imgList.length; i++) {
              this.imgUrlList.push(this.imgList[i].imgUrl)
            }
          })
    },

    //游戏属性配置信息
    getGameAttr(id) {
      gameAttr.getGameAttrInfo(id)
          .then(result => {
            this.gameAttrList = result.data
          })
    },

    //获取游戏更新信息
    getGameUpdate(id) {
      gameUpdate.getGameUpdateInfo(id)
          .then(result => {
            this.gameUpdateList = result.data
          })
    },

    //获取游戏评论信息
    getGameComment(val) {
      gameComment.getGameCommentByGameId(this.page, this.gameId)
          .then(res => {
            const data = res.data
            if (data != null) {
              this.gameCommentList = data.list
            }
          })
    },

    //添加心愿单
    addWish() {
      if (this.checkUserLogin()) {
        //修改按钮颜色
        if (this.changeWishBtnColor == '') {  //添加心愿单
          this.memberWish.gameId = this.gameId
          this.memberWish.gameName = this.goodsInfo.gameName
          this.memberWish.gameDefImg = this.goodsInfo.defaultImg
          this.memberWish.memberId = this.$store.getters.getUser.id
          memberWish.addMemberWish(this.memberWish)
              .then(res => {
                this.changeWishBtnColor = 'changeBtnColor'
                this.changeWishBtnValue = '已加入心愿单'
                this.memberWishId = res.data
                this.addWishGameIds(this.gameId)
              })
        } else {  //取消心愿单信息
          memberWish.deleteGameWish(this.gameId, this.$store.getters.getUser.id)
              .then(result => {
                this.memberWishId = ''
                this.changeWishBtnColor = ''
                this.changeWishBtnValue = '加入心愿单'
              })
          //删除心愿单列表中数据
          this.removeWishGameId(this.gameId)
        }
      } else {
        return
      }
    },

    // 加入购物车
    addShoppingCart(price, seckillPrice) {
      //判断用户是否登录
      if (!this.checkUserLogin()) {
        return
      }
      //填充信息
      this.gameCart.memberId = this.$store.getters.getUser.id
      this.gameCart.gameId = this.gameId
      this.gameCart.gameName = this.goodsInfo.gameName
      this.gameCart.gameDefImg = this.goodsInfo.defaultImg
      this.gameCart.price = price
      this.gameCart.seckillPrice = seckillPrice
      gameCart.addGameCartInfo(this.gameCart)
      .then(result => {
        this.$message({
          type: "success",
          message: "添加成功"
        })
        this.setShoppingCartNum(this.getNum + 1)
      })
    },
    addCollect() {

    },

    //获取登录用户的心愿单
    getWishGameIdsById(gameId) {
      if (-1 != this.$store.getters.getUser.memberWishIds.indexOf(gameId)) {
        this.changeWishBtnColor = 'changeBtnColor'
        this.changeWishBtnValue = '已加入心愿单'
      }
    },

    //修改图片
    changeImg(val) {
      this.defImg = val
    },

    //点赞评论
    thumbsUpComment(id) {
      if (!this.checkUserLogin()) {
        return
      }
      memberThumbsGameComment.thumbsUpComment(id, this.$store.getters.getUser.id, this.gameId)
          .then(result => {
            const data = result.data
            let ele = document.getElementById(id)
            let previousEle = ele.previousElementSibling
            if (0 == data) {
              previousEle.setAttribute("class", "iconfont")
              const value = parseInt(ele.innerText.trim()) - 1
              ele.innerText = ' ' + value
            } else {
              previousEle.setAttribute("class", "iconfont i-comment-thumbs-after")
              const value = parseInt(ele.innerText.trim()) + 1
              ele.innerText = ' ' + value
            }
          })
    },

    //获取用户点赞的评论id
    getCommentThumbs(memberId, gameId) {
      memberThumbsGameComment.getCommentThumbsInfoByMemberId(memberId, gameId)
          .then(result => {
            this.thumbsCommentIdList = result.data
          })
    },

    //检查是否登录
    checkUserLogin() {
      //判断用户是否登录
      if (!this.$store.getters.getUser) {
        this.$message({
          message: '请先登录',
          type: 'warning'
        })
        return false
      }

      return true
    }
  }
};
</script>
<style>
/* 头部CSS */
#details .page-header {
  height: 64px;
  margin-top: -20px;
  z-index: 4;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
}

#details .page-header .title {
  width: 1225px;
  height: 64px;
  line-height: 64px;
  font-size: 18px;
  font-weight: 400;
  color: #212121;
  margin: 0 auto;
}

#details .page-header .title p {
  float: left;
}

#details .page-header .title .list {
  height: 64px;
  float: right;
}

#details .page-header .title .list li {
  float: left;
  margin-left: 20px;
}

#details .page-header .title .list li a {
  font-size: 14px;
  color: #616161;
}

#details .page-header .title .list li a:hover {
  font-size: 14px;
  color: #ff6700;
}

/* 头部CSS END */

/* 主要内容CSS */
#details .main {
  width: 1225px;
  height: 560px;
  padding-top: 30px;
  margin: 0 auto;
}

#details .main .block {
  float: left;
  width: 640px;
  /*height: 560px;*/
}

#details .el-carousel .el-carousel__indicator .el-carousel__button {
  background-color: rgba(163, 163, 163, 0.8);
}

#details .main .content {
  float: left;
  margin-left: 25px;
  width: 500px;
}

#details .main .content .name {
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  font-weight: normal;
  /*color: #fcfcfc;*/
  padding-left: 10px;
  padding-top: 10px;
  font-family: 华文行楷;
}

#details .main .content .intro {
  color: #b0b0b0;
  padding-left: 10px;
  padding-top: 10px;
}

#details .main .content .store {
  color: #ff6700;
  padding-top: 10px;
}

#details .main .content .price {
  margin-top: 3.5rem;
  display: block;
  font-size: 18px;
  color: #ff6700;
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 0 25px;
}

#details .main .content .price .del {
  font-size: 14px;
  margin-left: 10px;
  color: #b0b0b0;
  text-decoration: line-through;
}

#details .main .content .pro-list {
  background: #f9f9fa;
  padding: 30px 60px;
  margin: 50px 0 50px;
}

#details .main .content .pro-list span {
  line-height: 30px;
  color: #616161;
}

#details .main .content .pro-list .pro-price {
  float: right;
}

#details .main .content .pro-list .pro-price .pro-del {
  margin-left: 10px;
  text-decoration: line-through;
}

#details .main .content .pro-list .price-sum {
  color: #ff6700;
  font-size: 24px;
  padding-top: 20px;
}

#details .main .content .button {
  height: 55px;
  margin: 10px 0 0 0;
  padding-left: 10px;
}

#details .main .content .button .el-button {
  float: left;
  height: 55px;
  font-size: 16px;
  color: #fff;
  border: none;
  text-align: center;
}

#details .main .content .button .shop-cart {
  width: 160px;
  background-color: #ff6700;
}

#details .main .content .button .shop-cart:hover {
  background-color: #f25807;
}

#details .main .content .button .like {
  width: 220px;
  margin-left: 40px;
  background-color: #2a80ef;
}

#details .main .content .button .like:hover {
  background-color: #1770e8;
}

#details .main .content .pro-policy li {
  float: left;
  margin-right: 20px;
  color: #b0b0b0;
}

/* 主要内容CSS END */

.img-def {
  width: 100%;
  height: 300px;
  border-radius: 10px;
}

.div-img-list {
  margin-left: 10px;
  width: 100%;
  height: 300px;
  overflow: auto;
  position: relative;
}

.div-img-item {
  position: relative;
}

.div-img-item button {
  background-color: white;
}

.div-img-item button:hover {
  background-color: #2a80ef;
}

.div-img-item img {
  /*border-radius: 10px;*/
  width: 140px;
  height: 80px;
}

.img-goods {
  border-radius: 10px;
  height: 100%;
  width: 100%;
}

.div-game-sale {
  margin-bottom: 10px;
  border-radius: 10px;
}

.div-wish {
  float: right;
  font-size: 15px;
  border-radius: 10px;
}

.changeBtnColor {
  color: #ff6700
}

.div-game-attr {
  margin-top: 10px;
  background-color: rgba(61, 61, 61, 0.9);
  border-radius: 10px;
}

.div-game-attr-list {
  padding-left: 10px;
  padding-top: 10px;
}

.div-game-attr-list h3 {
  padding-left: 20px;
  padding-bottom: 10px;
  text-align: left;
}

.div-game-attr-list div {
  padding-left: 10px;
  padding-bottom: 10px;
}

.div-game-intro {
  margin-top: 10px;
  border-radius: 10px;
}

.div-game-intro h3 {
  padding-left: 20px;
  padding-top: 5px;
  margin-bottom: 10px;
}

.div-game-intro p {
  padding: 0 5px 10px 5px;
  text-indent: 10px;
}

.div-game-update {
  margin-top: 10px;
}

.div-game-update h3 {
  padding-left: 20px;
  padding-top: 5px;
}

.btn-update-all {
  margin-top: 5px;
}

.div-game-update-list {
  margin-top: 10px;
}

.img-game-update {
  width: 200px;
  border-radius: 10px;
}

.div-game-comment {
  margin-top: 10px;
}

.div-game-comment h3 {
  padding-left: 20px;
  padding-top: 5px;
}

.div-game-comment-item {
  margin-top: 10px;
}

.div-comment-left a {
  margin-bottom: 30px;
  margin-left: 5px;
  font-size: 15px;
}

.el-link.el-link--default {
  font-size: 15px;
  color: #848586
}

.div-comment-right {
  margin-left: 5px;
}

.div-comment-right p {
  margin-top: 5px;
  font-size: 15px;
  letter-spacing: 2px;
  display: -webkit-box; /*  display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  -webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
  -webkit-line-clamp: 4; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
  overflow: hidden;
}

.span-create-time {
  font-size: 13px;
  margin-right: 5px;
  float: right;
  letter-spacing: 0px;
}

.i-comment-thumbs-after {
  color: #2a80ef;
}
</style>